<template>
  <div id="box">
    <div class="box-header">
      <div class="header-title">
        <table>
          <tr>
            <td>
              <img src="../assets/imgs/homestay.png" alt="">
            </td>
            <td>基于Hadoop的民宿数据分析及可视化</td>
          </tr>
        </table>
      </div>
      <div class="header-right">
        <div
            :style="back1"
            @click="backShow(1)">
          <router-link :to="{path: '/index/map'}">
            <table>
              <tr>
                <td>
                  地图检索
                </td>
              </tr>
            </table>
          </router-link>
        </div>
        <div
            :style="back2"
            @click="backShow(2)">
          <router-link :to="{path: '/index/one'}">
            <table>
              <tr>
                <td>
                  数据可视化
                </td>
              </tr>
            </table>
          </router-link>
        </div>
        <!--        <div-->
        <!--            @click="backShow(3)"-->
        <!--            :style="back3">-->
        <!--            <router-link :to="{path: '/index/two'}">-->
        <!--              <table>-->
        <!--                <tr>-->
        <!--                  <td>-->
        <!--                      机器学习-->
        <!--                  </td>-->
        <!--                </tr>-->
        <!--              </table>-->
        <!--            </router-link>-->
        <!--        </div>-->
        <div
            @click="backShow(4)"
            :style="back4">
          <router-link :to="{path: '/index/three'}">
            <table>
              <tr>
                <td>
                  数据管理
                </td>
              </tr>
            </table>
          </router-link>
        </div>
      </div>
    </div>
    <div class="box-subject">
      <!-- 路由 -->
      <router-view></router-view>
    </div>

  </div>
</template>

<!--js-->
<script>

export default {
  name: 'SeismIndex',
  data(){
    return{ //获取用户信息到主页
      sname: sessionStorage.getItem('name'),
      smail: sessionStorage.getItem('mail'),
      stel: sessionStorage.getItem('tel'),
      isAuth: "",//是否保持登录状态
      back1: 'background-color: rgb(0, 129, 64);font-weight: bold;',
      back2: '',
      back3: '',
      back4: ''
    };
  },
  methods:{
    //当点击退出按钮，将不保存登录状态
    logout() {
      this.isAuth = "false";//修改登录状态
      sessionStorage.setItem('s', this.isAuth);
      this.$router.replace('/login');//页面跳转至登录页面
    },
    backShow(id) {
      if(id === 1) {
        this.back1 = 'background-color: rgb(0, 129, 64);font-weight: bold;';
        this.back2 = '';
        this.back3 = '';
        this.back4 = '';
      }else if(id === 2) {
        this.back1 = '';
        this.back2 = 'background-color: rgb(0, 129, 64);font-weight: bold;';
        this.back3 = '';
        this.back4 = '';
      }else if(id === 3){
        this.back1 = '';
        this.back2 = '';
        this.back3 = 'background-color: rgb(0, 129, 64);font-weight: bold;';
        this.back4 = '';
      }else {
        this.back1 = '';
        this.back2 = '';
        this.back3 = '';
        this.back4 = 'background-color: rgb(0, 129, 64);font-weight: bold;';
      }
    }
  },
};

</script>
<!--css-->
<style scoped>
@import "../assets/css/SeismIndex.css";
</style>